<template>
    <div class="ccui-home-index">
        <div class="ccui-app-container">
            <!-- 高级搜索 -->
            <div class="ccui-advanced-search-wrapper ccui-clearfix">
                <el-search
                    :formProp="formData"
                    @search="search"
                    @change="change"
                    :isShowSearch="true"
                    :selectClear="true"
                    @resetForm="resetForm"
                    class="ccui-highsearch no-print"
                >
                    <tabToggle :tabBtn="tabBtn" :isActive="isActive" @tabChange="tabChange" :totalNum="totalNum"/>
                    
                    <div class="ccui-extend-btn">
                        <el-button
                            type="primary"
                            ref="pcconclease-new-item"
                            @click="handleGoNew"
                            icon="icon-ccui-add-sup"
                        >新增
                        </el-button>
                    </div>
                    
                    <template slot="search">
                        <el-input
                            v-model="formData.writeoffName"
                            clearable
                            searchLabel="冲销单名称"
                            placeholder="请输入冲销单名称模糊查询"
                            @blur="handleTrim('writeoffName')"
                        />
                        
                        <el-input
                            v-model="formData.writeoffCode"
                            clearable
                            searchLabel="冲销单编号"
                            placeholder="请输入冲销单编号模糊查询"
                            @blur="handleTrim('writeoffCode')"
                        />
                        
                        <el-input
                            v-model="formData.exwarehouseCode"
                            clearable
                            searchLabel="出库单编号"
                            placeholder="请输入出库单编号模糊查询"
                            @blur="handleTrim('exwarehouseCode')"
                        />
                        
                        <el-input
                            v-model="formData.reportInOrgName"
                            clearable
                            searchLabel="填报单位"
                            placeholder="请输入填报单位模糊查询"
                            @blur="handleTrim('reportInOrgName')"
                        />
                        
                        <el-input
                            v-model="formData.warehouseName"
                            clearable
                            searchLabel="仓库"
                            placeholder="请输入仓库模糊查询"
                            @blur="handleTrim('warehouseName')"
                        />
                        
                        <el-input
                            v-if="isActive === 0"
                            v-model="formData.warehouseName"
                            clearable
                            searchLabel="单据状态"
                            placeholder="请输入单据状态模糊查询"
                            @blur="handleTrim('warehouseName')"
                        />
                        
                        <el-date-picker
                            v-model="formData.reportTime"
                            searchLabel="编制日期"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            slot="searchItem7"
                        />
                    </template>
    
                    <el-input
                        v-model="formData.writeoffName"
                        clearable
                        searchLabel="冲销单名称"
                        placeholder="请输入冲销单名称模糊查询"
                        slot="searchItem1"
                        @blur="handleTrim('writeoffName')"
                    />
                    
                    <el-input
                        v-model="formData.writeoffCode"
                        clearable
                        searchLabel="冲销单编号"
                        placeholder="请输入冲销单编号模糊查询"
                        slot="searchItem2"
                        @blur="handleTrim('writeoffCode')"
                    />
                    
                    <el-input
                        v-model="formData.exwarehouseCode"
                        clearable
                        searchLabel="出库单编号"
                        placeholder="请输入出库单编号模糊查询"
                        slot="searchItem3"
                        @blur="handleTrim('exwarehouseCode')"
                    />
                    
                    <el-input
                        v-model="formData.reportInOrgName"
                        clearable
                        searchLabel="填报单位"
                        placeholder="请输入填报单位模糊查询"
                        slot="searchItem4"
                        @blur="handleTrim('reportInOrgName')"
                    />
                    
                    <el-input
                        v-model="formData.warehouseName"
                        clearable
                        searchLabel="仓库"
                        placeholder="请输入仓库模糊查询"
                        slot="searchItem5"
                        @blur="handleTrim('warehouseName')"
                    />
                    
                    <el-input
                        v-if="isActive === 0"
                        v-model="formData.warehouseName"
                        clearable
                        searchLabel="单据状态"
                        placeholder="请输入单据状态模糊查询"
                        slot="searchItem6"
                        @blur="handleTrim('warehouseName')"
                    />
                    
                    <el-date-picker
                        v-model="formData.reportTime"
                        searchLabel="编制日期"
                        clearable
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        slot="searchItem7"
                    />
                </el-search>
            </div>
            <!-- table表格 -->
            <div class="ccui-multifunctional-table-wrapper">
                <el-table
                    :data="tableData"
                    :fit="true"
                    :cell-style="cellStyle"
                    border
                    class="ccui-multifunctional-table"
                    @header-dragend="setTableTitleWidth"
                    @row-click="handleRowClick"
                    ref="tableListToSubmit"
                >
                    <template v-for="(table, index) in tableTheadOptions">
                        <el-table-column
                            :fixed="table.fixed || false"
                            :key="index"
                            :type="table.type"
                            :label="table.label"
                            :min-width="table.width"
                            :prop="table.prop"
                            :align="table.align || 'left'"
                            :header-align="table.headerAlign || 'left'"
                            :filters="table.filters"
                            :formatter="formatterList[table.formatterName]"
                            :show-overflow-tooltip="true"
                        >
                        </el-table-column>
                    </template>
                    
                    <el-table-column label="操作" width="80" fixed="right">
                        <template slot-scope="{ row }">
                            <el-button
                                size="mini"
                                type="text"
                                @click="handleGoEdit(row)"
                            >编辑
                            </el-button>
                            
                            <el-button
                                size="mini"
                                type="text"
                                @click="handleDelete(row)"
                            >删除
                            </el-button>
                            <!--                            <el-button-->
                            <!--                                v-if="row.billSource != 10 && ['3'].includes(row.statusCode)"-->
                            <!--                                size="mini"-->
                            <!--                                type="text"-->
                            <!--                                @click="getRevoke(row, 1)"-->
                            <!--                            >撤回-->
                            <!--                            </el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="ccui-table-footer" v-show="tableData.length > 0">
                    <div id="ccui-paging">
                        <el-pagination
                            :total="totalNum"
                            :page-size="pageSizeCode"
                            :current-page="pageNoCode"
                            :page-sizes="[10, 20, 50, 100, 200, 500]"
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            popper-class="ccui-paging-page-size-popper"
                            @prev-click="handlePrev"
                            @next-click="handleNext"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                        <el-button
                            class="ccui-pagination-btn"
                            size="mini"
                            type="default"
                            @click="handleSizeChange('none')"
                        >确定
                        </el-button
                        >
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import listMixin from "@/app/financial/financialOutbound/mixin";
import tabToggle from "@/app/financial/financialOutbound/components/tabToggle";

export default {
    name: "list_toSubmit",
    mixins: [listMixin],
    components: {
        tabToggle
    },
    data() {
        return {
            isActive: 1
        }
    }
}
</script>

<style scoped>

</style>